<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-tag type="success">部门</el-tag><span style="margin-left: 10px;margin-right: 10px;font-weight: bold">{{ leader.department }}</span>
      <el-tag>部门负责人</el-tag><span style="margin-left: 10px;font-weight: bold">{{ leader.name }}</span>
    </el-card>
    <el-button type="primary" style="margin: 10px" @click="handleAddTransfer">申请调岗</el-button>
    <el-table :data="userList" style="width: 100%;margin-top:30px;" border>
      <el-table-column type="expand">
        <template #default="props">
          <!--{{ scope.row.name }}-->
          <el-form  class="demo-table-expand" label-position="left">
            <el-form-item label="名字"><span>{{ props.row.name }}</span></el-form-item>
            <el-form-item label="邮箱"><span>{{ props.row.email }}</span></el-form-item>
            <el-form-item label="电话"><span>{{ props.row.phone }}</span></el-form-item>
            <el-form-item label="工号"><span>{{ props.row.workId }}</span></el-form-item>
            <el-form-item label="工龄"><span>{{ props.row.workAge }}</span></el-form-item>
            <el-form-item label="职位"><span>{{ props.row.position }}</span></el-form-item>
            <el-form-item label="等级"><span>{{ props.row.level }}</span></el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="工号" prop="workId"></el-table-column>
      <el-table-column label="名字" prop="name"></el-table-column>
      <el-table-column label="电话" prop="phone"></el-table-column>
      <el-table-column label="职位" prop="position"></el-table-column>
      <el-table-column label="等级" prop="level"></el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogVisible" title="调岗申请">
      <el-form :model="transfer" label-width="90px" label-position="left">
        <el-form-item label="调动后部门" prop="afterDepartmentId">
          <el-cascader
            v-model="transfer.afterDepartmentId"
            :options="departmentList"
            :props="SetCustomDept"
            clearable
            filterable></el-cascader>
        </el-form-item>
        <el-form-item label="调动后职位" prop="afterJobId">
          <el-select v-model="transfer.afterJobId" filterable placeholder="请选择职位">
            <el-option
              v-for="position in positionList"
              :key="position.id"
              :label="position.name"
              :value="position.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="调岗日期" prop="removeDate">
          <el-date-picker
            v-model="transfer.removeDate"
            type="date"
            value-format="timestamp"
            placeholder="开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="原因" prop="reason">
          <el-input v-model="transfer.reason" placeholder="原因"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="transfer.remark" placeholder="备注"/>
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmTransfer">确定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>

import { getDepartments, getTeam } from '@/api/department'
import { addMyTransfer } from '@/api/transfer'
import { getPositions } from '@/api/position'

const defaultUser = {
  id: ''
}
const defaultTransfer = {

}
export default {
  name: 'MyDepartment',
  comments: {},
  created() {
    // Mock: get all routes and users list from server
    this.getTeam()
    this.getDepartments()
    this.getPositions()
  },
  data() {
    return {
      leader: Object.assign({}, defaultUser),
      userList: [],
      transfer: {},
      dialogVisible: false,
      departmentList: [],
      positionList: [],
      SetCustomDept: {
        value: 'id',
        label: 'name',
        children: 'children',
        checkStrictly: true
      },
    }
  },
  methods: {
    async getTeam() {
      const res = await getTeam()
      this.userList = res.data.member
      this.leader = res.data.leader
    },
    async getDepartments() {
      await getDepartments(-1).then(res=>{
        // 调用递归方法，去除级联数据后将数据赋值给级联选择器
        this.departmentList=res.data
      });
    },
    async getPositions() {
      const res = await getPositions()
      this.positionList = res.data
    },
    handleAddTransfer() {
      this.transfer = Object.assign({}, defaultTransfer)
      this.dialogVisible = true
    },
    async confirmTransfer() {
      const val = this.transfer.afterDepartmentId
      this.transfer.afterDepartmentId = !isNaN(val) || typeof(val) == "undefined"? val : val.pop()
      await addMyTransfer(this.transfer)
      this.dialogVisible = false
      this.$notify({
        title: 'Success',
        dangerouslyUseHTMLString: true,
        message: "操作成功",
        type: 'success'
      })
    }
  }
}
</script>

<style scoped>
.box-card {
  width: 100%;
}
</style>
